let stateAll = false //是否全选状态，true选中,false未选中

/**
 * 显示购物车列表
 *   做什么?
 *    遍历商品列表数组，生成表格行
 */
let carStr = localStorage.getItem('CARTLIST')
let productList = JSON.parse(carStr) || []

function showProductList() {


    //初始化商品列表 表头
    let str = `
                <tr>
                    <th>序号</th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="100px">总价</th>
                    <th>操作</th>
                </tr>
         `
    //遍历商品列表生成商品列表
    let productArry = productList.map(item => {
        return `
            <tr>
                <td>${item.id}</td>
                <td><img src="${item.url}" width="80px" alt=""></td>
                <td>${item.name}</td>
                <td>￥${item.price}</td>
                <td><input type="button" name="minus" value="-" ${item.num <= 0?'disabled':''} ><input type="text" name="amount"
                        value="${item.num}"><input type="button" name="plus" value="+"></td>
                <td>￥${item.singlePrice}</td>
                <td>
                    <a href="#">移入收藏</a><br>
                    <a href="#" class="delete-btn">删除</a>
                </td>
            </tr>
        `
    })
    str = str + productArry.join('')
    $('table').html(str)
    // console.log('str', str)



}
/**
 * 购物车操作 数量加一减一
 */
function onProduct() {

    //加一
    //遍历所有加号绑定事件
    $('table').on('click','input[name="plus"]' ,function (e) {
        e=e||window.event
        let target=e.target||srcElement
        
        //获取id
        let id = $(target).parent().parent().find('td').first().html()
        let product = productList.find(item => item.id == id)
        product.num++
        product.singlePrice = (product.price * product.num).toFixed(2) //商品价格*数量
        // productList.push(product)
        console.log('singleprice',product.singlePrice);
        // console.log(product);
        
        showProductList()
        totalPrice()
        localStorage.setItem('CARTLIST', JSON.stringify(productList))
        console.log(product)

    })
    //减一
    $('table').on('click','input[name="minus"]', function (e) {
        // let carStr = localStorage.getItem('CARTLIST')
        // let productList = JSON.parse(carStr) || []
        e=e||window.event
        let target=e.target||srcElement
        //获取id
        let id = $(target).parent().parent().find('td').first().html()
        let product = productList.find(item => item.id == id)
        product.num--
        product.singlePrice = (product.price * product.num).toFixed(2) //商品价格*数量

        // productList.push(product)
        console.log('减号价格',product.singlePrice);

        showProductList()
        totalPrice()

        localStorage.setItem('CARTLIST', JSON.stringify(productList))

    })

    //删除
    $('table').on('click', '.delete-btn', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        let id = $(target).parent().parent().find('td').first().html()
        let index = productList.findIndex(item => item.id == id)

        productList.splice(index, 1)

        showProductList()
        totalPrice()

        localStorage.setItem('CARTLIST', JSON.stringify(productList))

    })

}

/**
 * 计算总价
 */
function totalPrice() {

    let sum = productList.reduce((s, item) => s += Number(item.singlePrice), 0)
    $('.total-price').html(sum.toFixed(2))


}
showProductList()
onProduct()
totalPrice()
